<template>
    <div class="div-asider">
      <el-menu
        class="el-menu-vertical-demo"
        style="border-right: 1px;"
      >

      <el-menu-item 
      v-for="item in noChildrenMenus"
      :key="item.path"
      :index="item.path"
      @click="() => router.push(item.path)"

      >
        <el-icon><component :is="item.icon" /></el-icon>
        <span>{{ item.title }}</span>
      </el-menu-item>




      <el-sub-menu 
      v-for="item in hasChildrenMenus"
      :key="item.path"
      :index="item.path"

      >
          <template #title>
            <el-icon><setting /></el-icon>
            <span>{{ item.title }}</span>
          </template>

          <el-menu-item-group>
            <el-menu-item 
            v-for="subItem in item.children"
            :key="subItem.path"
            :index="subItem.path"
            @click="() => router.push(subItem.path)"
            >
            <el-icon><component :is="subItem.icon" /></el-icon>
            <span>{{ subItem.title }}</span>


            </el-menu-item>
          </el-menu-item-group>

        </el-sub-menu>



      <!-- <el-menu-item index="0" @click="() => router.push('/index')">
        <el-icon><House /></el-icon>
        <span>控制面板</span>
      </el-menu-item>


        <el-menu-item index="1" @click="() => router.push('/user')">
          <el-icon><user /></el-icon>
          <span>用户管理</span>
        </el-menu-item>
        <el-menu-item index="2" @click="() => router.push('/book')">
          <el-icon><document /></el-icon>
          <span>图书管理</span>
        </el-menu-item>
        <el-menu-item index="3" >
          <el-icon><CreditCard /></el-icon>
          <span>借阅管理</span>
        </el-menu-item>


        <el-sub-menu index="4">
          <template #title>
            <el-icon><setting /></el-icon>
            <span>系统设置</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1">设置1</el-menu-item>
            <el-menu-item index="1-2">设置2</el-menu-item>
          </el-menu-item-group>

        </el-sub-menu> -->
      </el-menu>

    </div>
    
</template>
    
<script setup>
import { computed, ref } from 'vue'
import {useRouter,useRoute} from 'vue-router'
import {useUserStore} from '@/stores/userStores'

const userStrore = useUserStore()


//js 函数形式 跳转 
const router = useRouter()
const route = useRoute()

const userInfo = userStrore.getUserInfo()
console.log(userInfo);



// 控制面板 用户管理 图书管理 借阅管理 系统设置

const menus = ref([{
    title: '控制面板',
    path: '/index',
    icon: 'House'
},
{
    title: '用户管理',
    path: '/user',
    icon: 'User'
},
{
    title: '图书管理',
    path: '/book',
    icon: 'Document'
},
{
    title: '借阅管理',
    path: '',
    icon: 'CreditCard'
},
{
    title: '系统设置',
    path: '',
    children: [
        {title:'设置1',path:'/setting',icon:'Setting'},
        {title:'设置2',path:'/setting',icon:'Setting'}
    ]

}])

//拆分成两个 数据遍历  一个有children 一个没有children
//过滤 filter
//计算属性 computed


const noChildrenMenus = computed(() => 
          menus.value.filter(item => !item.children) )


const hasChildrenMenus = computed(() =>
 menus.value.filter(item => item.children))






</script>

<style scoped>
.div-asider{
    width: 200px;
    height: 1000vh;
    
}
</style>